<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>MapIconMaker Documentation: Examples</title>
   <link rel="stylesheet" type="text/css" href="http://code.google.com/apis/maps/documentation/local_extensions.css" /> 
   <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css" />
   <script type="text/javascript" src="http://code.google.com/apis/maps/include/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<h1><a name="MapIconMaker_HowTo" id="MapIconMaker_HowTo"></a>MapIconMaker How-to</h1>
<p>
You can use the MapIconMaker to create icons for your map markers easily:
</p>
<ol>
<li>Include mapiconmaker.js in your document header. You can reference it from here or download it to your own server.
<pre class="prettyprint">
&lt;script src="mapiconmaker.js" type="text/javascript"&gt;&lt;/script&gt;
</pre>
</li>

<li>Create an icon using <code>MapIconMaker.createMarkerIcon</code> and add it to the map.</li>
<pre class="prettyprint">
  var map = new GMap2(document.getElementById("map"));
  map.setCenter(new GLatLng(37.441944, -122.141944), 13);
  var newIcon = MapIconMaker.createMarkerIcon({width: 64, height: 64, primaryColor: "#00ff00"});
  var marker = new GMarker(map.getCenter(), {icon: newIcon});
  map.addOverlay(marker);
</pre>
</li>
</ol>
<p>
<a href="../examples/createmarkericon-simple.html">View example (createmarkericon-simple.html).</a>
</p>

<h2>Using the MarkerIconOptions Wizard</h2>
<p>
We've created a wizard to make it easy for you to play around with the various parameters in <code>MarkerIconOptions</code>. The wizard lets you choose the three colors and the size, and shows you the result using randomly placed markers on a map.
<p>
<a href="../examples/markericonoptions-wizard.html">View example (markericonoptions-wizard.html).</a>
</p>

</body>
</html>
